import tracker from '../utils/tracker.js';
import onload from '../utils/onload.js';
import getLastEvent from '../utils/getLastEvent.js';
import getSelector from '../utils/getSelector.js';
export default function timing() {
  let FMP, LCP;
  // 增加一个性能条目的观察者
  new PerformanceObserver((entryList, observer) => {
    let perfEntriens = entryList.getEntries();
    FMP = perfEntriens[0];
    observer.disconnect(); // 不需要观察
  }).observe({ entryTypes: ['element'] }) // 观察页面中有意义的元素

  new PerformanceObserver((entryList, observer) => {
    let perfEntriens = entryList.getEntries();
    LCP = perfEntriens[0];
    observer.disconnect(); // 不需要观察
  }).observe({ entryTypes: ['largest-contentful-paint'] }) // 观察页面中最大的元素


  new PerformanceObserver((entryList, observer) => {
    let lastEvent = getLastEvent();
    let firstInput = entryList.getEntries()[0]; // 渠道第一个条目
    console.log("FID", firstInput);
    if (firstInput) {
      // 开始处理的时间 - 开始点击的时间，的差值就是处理的延迟
      let inputDelay = firstInput.processingStart - firstInput.startTime;
      let duration = firstInput.duration; // 处理时长
      if (inputDelay > 0 || duration) {
        tracker.send({
          kind: 'exeprience', // 用户体验指标
          type: 'firstInputDeay', // 首次输入延迟
          inputDelay, // 输入延迟
          duration,  // 处理的时间
          startTime: firstInput.startTime,
          selector: lastEvent ? getSelector(lastEvent.path || lastEvent.target) : ''
        });
      }
    }
    observer.disconnect(); // 不需要观察
  }).observe({ type: 'first-input', buffered: true }) // 用户第一次交互，点击页面
  onload(function () {

    setTimeout(() => {
      const {
        fetchStart,
        connectStart,
        connectEnd,
        requestStart,
        responseStart,
        responseEnd,
        domLoading,
        domInteractive,
        domContentLoadedEventStart,
        domContentLoadedEventEnd,
        loadEventStart,
      } = performance.timing;
      // console.log("performance timing:", performance)

      tracker.send({
        kind: 'exeprience', // 用户体验指标
        type: 'timing', // 统计每个阶段的时间
        connectTime: connectEnd - connectStart, // 连接时间
        ttfbTime: responseStart - requestStart, // 首字节到达时间
        responseTime: responseEnd - responseStart, // 响应时间
        parseDOMTime: loadEventStart - domLoading, // dom解析时间
        domContentLoadedTime: domContentLoadedEventEnd - domContentLoadedEventStart, // dom加载完成时间
        timeToInteractive: domInteractive - fetchStart, // 首次可交互时间
        loadTime: loadEventStart - fetchStart, // 完整的加载时间
      });
      let FP = performance.getEntriesByName('first-paint')[0]
      let FCP = performance.getEntriesByName('first-contentful-paint')[0]
      // 开始发送性能指标
      console.log("FP", FP);
      console.log("FCP", FCP);
      console.log("FMP", FMP);
      console.log("LCP", LCP);


      tracker.send({
        kind: 'exeprience', // 用户体验指标
        type: 'paint', // 统计每个阶段的时间
        firstPant: FP.startTime, // 首次绘制
        firstContentFulPant: FCP.startTime,
        firstMeaningfulPant: FMP.startTime,
        largestContentFulPaint: LCP.startTime,  // 最大内容绘制
      });
    }, 3000)
  });
}